<script setup lang="ts">
import { ElMessage } from "element-plus";
import { watch } from "vue";
import { onMounted, reactive, ref, } from "vue";

import Login from "../Login/Index.vue";

const props = defineProps(["lineValue"]);

const form = reactive({
  date: "",
  Number: "",
});

const emit = defineEmits(["updateLineName"]);
const lineName = ref("");
const saveLine = () => {
  const post = {
    Line: props.lineValue,
    Name: lineName.value,
  };
  // SaveLineName(post).then((res: any) => {
  //   if (res.code !== 200) {
  //     ElMessage.error(res.msg);
  //     return;
  //   }
  //   ElMessage.success(res.msg);
  //   emit("updateLineName");
  // });
};
const deviceList = ref<any[]>([]);
const isEdit = ref(false);
const loginRef = ref();
const currentIndex = ref();

const rowClick = (row: any, event: any, column: any) => {
  const { FEntryID } = row;
  //根据当前FEntryID匹配当前索引
  currentIndex.value = deviceList.value.findIndex((item: any) => {
    return item.FEntryID == FEntryID;
  });
  console.log(`output->currentIndex.value`, currentIndex.value);
};

const onAdd = () => {
  //调出登录窗口
  // loginRef.value.open("edit");
  const arrLen = deviceList.value.length;
  const temp = JSON.parse(JSON.stringify(deviceList.value));
  // debugger
  // 如果点击第一行新增 使用unshift
  if (currentIndex.value == 0) {
    temp.unshift({ Name: "" });
    temp[currentIndex.value].FEntryID = Number(
      temp[currentIndex.value + 1].FEntryID
    );
  } else {
    //将当前索引上面的一行赋值空值
    temp.splice(currentIndex.value, 0, { Name: "" });
    temp[currentIndex.value].FEntryID =
      Number(temp[currentIndex.value - 1].FEntryID) + 1;
  }
  //将当前索引以后的fEntryID+1 数组长度+1
  for (let i = currentIndex.value + 1; i < arrLen + 1; i++) {
    temp[i].FEntryID = Number(temp[i].FEntryID) + 1;
  }
  deviceList.value = temp;
};
const onEdit = () => {
  //调出登录窗口
  loginRef.value.open("edit");
};
const onSave = () => {
  const post = {
    FDeviceEntity: deviceList.value,
  };
  console.log(`output->post`, post);
  // SaveDeviceInfo(post).then((res: any) => {
  //   if (res.code !== 200) {
  //     ElMessage.error(res.msg);
  //     return;
  //   }
  //   ElMessage.success(res.msg);
  //   getDeviceInfo();
  // });
};
const onDel = (index: number) => {
  deviceList.value.splice(index, 1);
  const temp = JSON.parse(JSON.stringify(deviceList.value));
  //将当前索引下面的一行赋值空值
  // temp.splice(currentIndex.value + 1, 0, { fID: "" });
  // temp[currentIndex.value + 1].FEntryID =
  //   Number(temp[currentIndex.value].FEntryID) + 1;
  //将当前索引以后的fEntryID-1 数组长度-1
  for (let i = index; i < temp.length; i++) {
    temp[i].FEntryID = Number(temp[i].FEntryID) - 1;
  }
  deviceList.value = temp;
};
const getDeviceInfo = () => {
  // GetDeviceList().then((res: any) => {
  //   if (res.code !== 200) {
  //     ElMessage.error(res.msg);
  //     return;
  //   }
  //   deviceList.value = res.data;
  // });
};
const logList = ref([]);
const getLogInfo = () => {
  const post = {
    Line: props.lineValue,
    FEntryID: form.Number,
    StartDateTime: form.date[0] || "",
    EndDateTime: form.date[1] || "",
  };
  // GetRealLog(post).then((res: any) => {
  //   if (res.code !== 200) {
  //     ElMessage.error(res.msg);
  //     return;
  //   }
  //   logList.value = res.data;
  // });
};
const deviceNameList = ref([]);
const getDeviceNameList = () => {
  // GetDeviceName().then((res: any) => {
  //   if (res.code !== 200) {
  //     ElMessage.error(res.msg);
  //     return;
  //   }
  //   deviceNameList.value = res.data;
  // });
};
onMounted(() => {
  getDeviceNameList();
  getDeviceInfo();
  props.lineValue && getLogInfo();
});
watch(
  () => props.lineValue,
  (newVal, oldVal) => {
    getLogInfo();
  }
);
const closeLogin = (type: string) => {
  isEdit.value = true;
};
</script>

<template>
  <div class="search">
    <div>
      <el-form :inline="true" :model="form" class="my-form demo-form-inline">
        <el-form-item label="查询类型">
          <el-select
            v-model="form.Number"
            placeholder="请选择"
            filterable
            clearable
            style="width: 234px"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="(item, index) in deviceNameList"
              :key="index"
              :label="item.Label"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-select
            v-model="form.Number"
            placeholder="请选择"
            filterable
            clearable
            style="width: 234px"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="(item, index) in deviceNameList"
              :key="index"
              :label="item.Label"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        :model="form"
        class="my-form demo-form-inline mt-2"
      >
        <el-form-item label="日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 期">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="-"
            start-placeholder="起始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 557px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getLogInfo" class="mr-6">查 询</el-button>
          <el-button type="warning">导 出</el-button>
        </el-form-item>
      </el-form>
      <div class="table-box mt-6">
        <el-table :data="logList" height="700">
          <el-table-column
            align="center"
            prop="DateTime"
            label="时间"
            width="370"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="OperType"
            label="日志类型"
            width="330"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="Name"
            label="设备名称"
            width="330"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="Description"
            label="描述"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>
  </div>
  <Login ref="loginRef" @success="closeLogin" />
</template>
<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.demo-form-inline .el-form-item {
  margin-bottom: 0;
}

:deep(.demo-form-inline .el-form-item__label) {
  font-size: inherit;
  color: inherit;
  margin-top: 4px;
}

:deep(.table-box .el-input__inner) {
  text-align: center;
}

.table-box {
  :deep(.el-table) {
    font-size: 1.3rem;
    background-color: #141c36;
  }

  :deep(.el-table__empty-block) {
    background-color: #141c36;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: #143452;
    color: #79a0c9;
    font-weight: 600;
  }

  :deep(.el-table .el-table__cell) {
    background: #141c36;
    color: #799ac1;
    border-bottom: 0;
    padding: 0.5rem 0;
  }

  :deep(
      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
    ) {
    background-color: #1f4465;
  }

  :deep(.el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    color: #799ac1;
    height: 2.6rem;
    color: #799ac1;
    font-size: 1.3rem;
  }

  :deep(.el-table) {
    --el-table-bg-color: none;
  }

  :deep(.el-table tbody .el-table__cell) {
    height: 20px;
    padding: 7px 0;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #799ac1;
  }
}

:deep(.my-form .el-input__wrapper) {
  background: #1c324f;
  box-shadow: none;
  height: 2.6rem;
}

:deep(.my-form .el-input__inner) {
  height: 2.6rem;
  color: #799ac1;
  font-size: 1.3rem;
}

.my-form {
  :deep(.el-button) {
    font-size: 1.2rem;
    height: 42px;
    padding: 6px 20px;
  }
  :deep(.el-date-editor .el-range-input) {
    font-size: 1.3rem;
  }
  :deep(.el-date-editor .el-range-separator) {
    color: inherit;
  }
  :deep(.el-date-editor .el-range__icon) {
    font-size: 20px;
  }
}
.line-form {
  :deep(.el-form-item) {
    margin-right: 0;
  }
  :deep(.el-button.my-save-btn) {
    margin-left: 24px;
  }
}
.device-form {
  :deep(.el-form-item) {
    margin-right: 18px;
  }
  :deep(.el-form-item:last-child) {
    margin-right: 22px;
  }
  :deep(
      .el-button.is-disabled,
      .el-button.is-disabled:focus,
      .el-button.is-disabled:hover
    ) {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
}
.table-box {
  :deep(.el-button--danger.is-plain.is-disabled) {
    background-color: var(--el-color-danger);
    border-color: var(--el-color-danger);
    color: #fff;
  }
  :deep(.el-table__empty-text) {
    color: #79a0c9;
  }
}

:deep(.el-table .el-table__inner-wrapper::before){
  display: none
}
</style>